<template>
    <view class="login">
        <view class="login-main">
            <view class="login-logo">
                <image src="@/static/logo.png" @click="navBack" mode="aspectFill"></image>
            </view>
            <view class="login-list flex border-all">
                <view class="iconfont icon-shoujihao flex"></view>
                <view class="login-input">
                    <input type="number" maxlength="11" placeholder="请输入手机号" class="is-input1 " v-model="form.mobile"/>
                </view>
            </view>
            <view class="login-list flex border-all">
                <view class="iconfont icon-yanzhengma flex"></view>
                <view class="login-input">
                    <input type="number" maxlength="6" placeholder="请输入验证码" class="is-input1 " v-model="form.yzcode"/>
                </view>
                <view class="code-sx"></view>
                <view class="codeimg" @click="getCode()" :disabled="disable">{{text}}</view>
            </view>
            <button class="cu-btn login-btn" @tap="toLogin" :disabled="logining">登 录</button>
            <view class="login-tip">点击登录表示同意
                <navigator>软件许可及服务协议</navigator>
            </view>
        </view>
        <view class="login-footer">
            <view class="footer-tip flex">其他登录方式</view>
            <view class="footer-other flex">
                <view class="other-list">
                    <button class="wechat" @tap="wxlogin()"></button>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
  import {
    mapMutations,
  } from 'vuex'

  import { checkPhone } from '@/utils/index'

  import { getCode, dologin, oauth } from '@/api/user'

  export default {
    data () {
      return {
        logining: false,
        disable: false,
        text: '获取验证码',
        form: {mobile: '', yzcode: ''},
        flag: 1,
        time: 60,
        src: '',
        getCodeBtnColor: '#07c160',
      }
    },
    onLoad () {
    },
    methods: {
      ...mapMutations(['login']),
      inputChange (e) {
        const key = e.currentTarget.dataset.key
        this[key] = e.detail.value
      },
      navBack () {
        console.log('gogo')
        uni.switchTab({
          url: `/pages/index/index`,
        })
      },
      toRegist () {

      },
      async getCode () {
        if (!checkPhone(this.form.mobile)) {
          this.server.msg('手机号码不正确')
          return
        }
        let result = (await getCode({send: this.form.mobile, type: 'login'}))
        this.server.msg(result.msg)
        if (parseInt(result.status) === 1) {
          this.disable = true
          this.countDown()
        }

      },
      countDown () {
        this.time = this.time - 1
        this.text = this.time + '秒'
        if (this.time <= 0) {
          this.text = '获取验证码'
          this.time = 60
          this.disable = false
          clearInterval(this.flag)
          return
        }
        this.flag = setTimeout(this.countDown, 1000)
      },
      addButton () {
        uni.authorize({
          scope: 'scope.userInfo',
          success () {
            uni.getLocation()
          },
        })
      },
      async wxlogin () {
        console.log()
        let that = this
        uni.getProvider({
          service: 'oauth',
          success: function (res) {
            if (~res.provider.indexOf('weixin')) {
              uni.authorize({
                scope: 'scope.userInfo',
                success () {
                  uni.getUserInfo({
                    provider: 'weixin',
                    success: function (infoRes) {
                      that.dowxlogin(infoRes.userInfo)
                    },
                  })
                }, fail () {
                  uni.navigateTo({
                    url: `/pages/public/authorize`,
                  })
                },
              })
            }
          },
        })
      },
      dowxlogin (user) {
        let that=this
        uni.login({
          provider: 'wechat',
          success: function (loginRes) {
            if (that.server._isEmpty(loginRes.code)) {
              return
            }
            oauth({code: loginRes.code,...user}, function (result) {
              that.server.msg(result.data.msg)
              if (parseInt(result.data.status) === 1) {
                that.login(result.data.result)
                uni.switchTab({
                  url: `/pages/user/user`,
                })
              }
            })
          },
        })
      },
      async toLogin () {
        this.logining = true
        const {mobile, yzcode} = this.form
        if (!checkPhone(mobile)) {
          this.logining = false
          this.server.msg('手机号码不正确')
          return
        }
        if (this.server._isEmpty(yzcode)) {
          this.logining = false
          this.server.msg('验证码不能为空')
          return
        }
        let result = (await dologin({mobile: mobile, code: yzcode}))
        this.server.msg(result.msg)
        if (parseInt(result.status) === 1) {
          this.login(result.result)
          uni.switchTab({
            url: `/pages/user/user`,
          })
        }
        this.logining = false
      },
    },
  }
</script>


<style lang="scss">
    page {
        background-color: #FFFFFF;

    }

    .flex {
        display: flex;
    }

    .login {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .login-main {
        flex: 1;
        padding: 0 70upx;

        .login-logo {
            width: 248upx;
            height: 242upx;
            padding-bottom: 50upx;
            margin: 200upx auto 0 auto;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .logo-tip {
            text-align: center;
            padding-top: 25upx;
            font-size: 32upx;
            font-weight: 200;
            color: rgba(51, 51, 51, 1);
            padding-bottom: 50upx;
        }
        .login-list {
            margin-top: 35upx;
            height: 100upx;
            align-items: center;
            padding: 0 30upx;

            &.border-all {
                &:after {
                    border: 1px solid #D0D0D0;
                    border-radius: 100upx;
                }
            }

            .iconfont {
                width: 65upx;
                font-size: 44upx;
                align-items: center;

                &:after {
                    margin-left: 20upx;
                    content: '';
                    width: 2upx;
                    height: 35upx;
                    background: #D0D0D0;
                    display: block;
                }
            }

            .login-input {
                flex: 1;

                input {
                    font-size: 28upx;
                    color: #333333;
                    padding-left: 20upx;
                }
            }

            .code-sx {
                content: '';
                width: 2upx;
                height: 25upx;
                background: #D0D0D0;
                margin-right: 25upx;
            }

            .codeimg {
                font-size: 24upx;
                color: #999999;
            }
        }

        .login-btn {
            margin-top: 70upx;
            height: 96upx;
            width: 100%;
            background: linear-gradient(-90deg, #fa436a, #fa436a);
            border-radius: 47upx;
            font-size: 34upx;
            color: #ffffff;
        }

        .login-tip {
            padding-top: 26upx;
            font-size: 22upx;
            color: #666666;
            text-align: center;

            navigator {
                margin-left: 10upx;
                display: inline-block;
                color: #fa436a;
            }
        }
    }

    .login-footer {
        padding: 0 70upx;

        .footer-tip {
            align-items: center;
            font-size: 24upx;
            color: #999999;
            text-align: center;

            &:before {
                flex: 1;
                content: '';
                height: 2upx;
                background: #D0D0D0;
                margin-right: 30upx;
            }

            &:after {
                margin-left: 30upx;
                flex: 1;
                content: '';
                height: 2upx;
                background: #D0D0D0;
            }

        }

        .footer-other {
            padding: 40upx 0 100upx 0;
            justify-content: center;

            .other-list {
                width: 80upx;
                height: 80upx;
                margin: 0 75upx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .wechat {
        background-image: url("../../static/ic-weixin@2x.png");
        background-size: 100%;
    }
</style>
